﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../_scripts/jquery-1.8.2.js" type="text/javascript"></script>
    <script src="myplugin.js" type="text/javascript"></script>
    <style type="text/css">
        body
        {
            padding: 0;
            margin: 0;
        }
        .resizebox
        {
            width: 300px;
            height: 200px;
            background-color: #666;
        }
        .fixedbox
        {
            width: 600px;
            height: 400px;
            background-color: #777;
        }
        .point
        {
            width: 5px;
            height: 5px;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;
        }
        #p_one
        {
            background-color: red;
        }
        #p_two
        {
            background-color: Blue;
        }
        #p_three
        {
            background-color: Yellow;
        }
    </style>
</head>
<body>
    <div class="fixedbox">
        <div class="resizebox">
        </div>
        <div class="point" id="p_one">
        </div>
        <div class="point" id="p_two">
        </div>
        <div class="point" id="p_three">
        </div>
    </div>
    <script type="text/javascript">
        $(".resizebox").myplugin();
    </script>
</body>
</html>
   